<template>
  <div class="card">
    <div style="margin-bottom: 20px">
      <a-input class="inputStyle" :allowClear="true" v-model="form.no" placeholder="银行卡号"></a-input>
      <a-input class="inputStyle" :allowClear="true" v-model="form.phone" placeholder="用户手机号"></a-input>
      <a-input class="inputStyle" :allowClear="true" v-model="form.realname" placeholder="用户姓名"></a-input>
      <a-input class="inputStyle" :allowClear="true" v-model="form.channel_mer_no" placeholder="子商户号"></a-input>
      <a-select v-model="form.state" class="inputStyle" placeholder="审核状态" :allowClear="true">
        <a-select-option v-for="item in type" :key="item.id" :value="item.id">
          {{ item.name }}
        </a-select-option>
      </a-select>
      <a-button class="btnStyle" type="primary" @click="query">查询</a-button>
      <a-button class="btnStyle" @click="reset">重置</a-button>
      <a-button class="btnStyle" type="primary" @click="batchPass">批量通过</a-button>
    </div>
    <a-table
      :row-selection="rowSelection"
      :pagination="false"
      :rowKey="(record, index) => index"
      :loading="loading"
      style="border: 1px solid #e8e8e8"
      :columns="columns"
      :data-source="data"
    >
      <div slot="channel_check_no" slot-scope="text, record">
        <div class="branchStyle">
          <span>{{ record.channel_check_no }}</span>
        </div>
      </div>
      <div style="cursor: pointer" slot="owner" slot-scope="text, record">
        <a-tooltip placement="top">
          <template slot="title">
            <span>证件号码：{{ record.user.id_card }}</span>
          </template>
          <span style="color: #1890ff">{{ record.owner }}</span>
        </a-tooltip>
      </div>
      <div slot="address" slot-scope="text, record">
        <div class="addressStyle">
          <span>{{ record.province_text }}</span>
          <span>{{ record.city_text }}</span>
          <span>{{ record.area_text }}</span>
        </div>
      </div>
      <div slot="branch" slot-scope="text, record">
        <div class="branchStyle">
          <span>{{ record.branch }}</span>
        </div>
      </div>
      <div slot="no" slot-scope="text, record">
        <div class="branchStyle">
          <span>{{ record.no }}</span>
        </div>
      </div>
      <div slot="created_at" slot-scope="text, record">
        <div class="branchStyle">
          <span>{{ record.created_at }}</span>
        </div>
      </div>
      <div slot="updated_at" slot-scope="text, record">
        <div class="branchStyle">
          <span>{{ record.updated_at }}</span>
        </div>
      </div>
      <div slot="addressS" slot-scope="text, record">
        <div class="branchStyle">
          <span>{{ record.address }}</span>
        </div>
      </div>
      <div style="cursor: pointer" slot="reason" slot-scope="text, record">
        <a-tooltip placement="top">
          <template slot="title">
            <span>{{ record.failed_reason }}</span>
          </template>
          <div class="branchStyle reasonStyle">
            <span style="color: #1890ff">{{ record.failed_reason }}</span>
          </div>
        </a-tooltip>
      </div>
      <div slot="full_state_text" slot-scope="text, record">
        <span
          :style="`color:${
            record.check_state == 10 ? '#00be0d' : `${record.check_state == 20 ? '#ff0000' : '#505659'}`
          }`"
          >{{ record.full_state_text }}</span
        >
      </div>
      <div slot="operate" slot-scope="text, record">
        <a-popconfirm placement="top" ok-text="确定" cancel-text="取消" @confirm="amendment(record.id)">
          <template slot="title">
            <p>确定要修正吗?</p>
            <p style="font-size: 12px; color: red">此操作不可撤回</p>
          </template>
          <span class="linkStyle">修正</span>
        </a-popconfirm>
        <span class="lineStyle">丨</span>
        <span class="linkStyle" @click="edit(record)">编辑</span>
        <span class="lineStyle">丨</span>
        <a-popconfirm placement="top" ok-text="确定" cancel-text="取消" @confirm="pass(record.id)">
          <template slot="title">
            <p>确定要通过审核吗?</p>
            <p style="font-size: 12px; color: red">此操作不可撤回</p>
          </template>
          <span class="linkStyle" v-if="record.check_state == 0">通过</span>
        </a-popconfirm>
        <span class="lineStyle" v-if="record.check_state == 0">丨</span>
        <span class="linkStyle" v-if="record.check_state == 0" @click="turnDown(record.id)">驳回</span>
        <span v-if="record.check_state != 0">已审核</span>
      </div>
    </a-table>
    <div class="paging">
      <a-pagination
        @change="changepage"
        @showSizeChange="showSizeChange"
        size="small"
        :total="total"
        :page-size="form.page_size"
        :pageSizeOptions="['10', '20', '30', '40', '50']"
        :show-total="total => `共 ${total} 条`"
        show-size-changer
        show-quick-jumper
      />
    </div>
    <a-modal v-model="visible" title="驳回原因" @ok="handleOk" @cancel="value = ''">
      <a-textarea v-model="value" placeholder="请输入驳回原因" :max-length="100" :rows="4" />
    </a-modal>
    <a-modal
      v-model="isShowResult"
      wdith="60%"
      ok-text="确认"
      cancel-text="取消"
      @cancel="closeResult"
      @ok="closeResult"
      title="返回结果"
    >
      <a-textarea v-model="resultContent" :rows="12" />
    </a-modal>
    <EditCard :isShowEdit.sync="isShowEdit" :object.sync="object" @upload="getPosList" />
  </div>
</template>

<script>
import EditCard from './dialog/EditCard.vue'
import { getAccountListAPI, isPassAPI, amendmentAPI } from '@/api/userinfo.js'
export default {
  name: 'DepositCard',
  components: {
    EditCard
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this
      return {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.select_rows = selectedRows
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.check_state !== 0
          }
        })
      }
    }
  },
  data() {
    return {
      object: {},
      selectedRowKeys: [],
      select_rows: [],
      resultContent: '',
      isShowResult: false,
      isShowEdit: false,
      id: '',
      value: '',
      visible: false,
      loading: false,
      total: null,
      type: [
        { id: '00', name: '未审核' },
        { id: 1, name: '通道审核中' },
        { id: 10, name: '审核成功' },
        { id: 20, name: '审核失败' }
      ],
      form: {
        page: 1,
        page_size: 50,
        state: '00',
        no: '',
        realname: '',
        phone: '',
        channel_mer_no: ''
      },
      columns: [
        {
          title: '#',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '真实姓名',
          dataIndex: 'owner',
          width: '100px',
          scopedSlots: { customRender: 'owner' },
          align: 'center'
        },
        {
          title: '银行卡号',
          dataIndex: 'no',
          width: '113px',
          scopedSlots: { customRender: 'no' },
          align: 'center'
        },
        {
          title: '子商户号',
          dataIndex: 'channel_mer_no',
          width: '113px',
          align: 'center'
        },
        {
          title: '流水号',
          dataIndex: 'channel_check_no',
          scopedSlots: { customRender: 'channel_check_no' },
          width: '100px',
          align: 'center'
        },
        {
          title: '银行名称',
          dataIndex: 'belong',
          width: '100px',
          align: 'center'
        },
        {
          title: '预留手机号',
          dataIndex: 'mobile',
          width: '100px',
          align: 'center'
        },
        {
          title: '地址',
          width: '100px',
          scopedSlots: { customRender: 'address' },
          align: 'center'
        },
        {
          title: '创建时间',
          scopedSlots: { customRender: 'created_at' },
          width: '120px',
          align: 'center'
        },
        {
          title: '更新时间',
          scopedSlots: { customRender: 'updated_at' },
          width: '120px',
          align: 'center'
        },
        {
          title: '支行名称',
          dataIndex: 'branch',
          scopedSlots: { customRender: 'branch' },
          width: '100px',
          align: 'center'
        },
        {
          title: '街道',
          dataIndex: 'address',
          width: '100px',
          scopedSlots: { customRender: 'addressS' },
          align: 'center'
        },
        {
          title: '备注信息',
          dataIndex: 'failed_reason',
          scopedSlots: { customRender: 'reason' },
          width: '150px',
          align: 'center'
        },
        {
          title: '审核状态',
          dataIndex: 'full_state_text',
          width: '100px',
          scopedSlots: { customRender: 'full_state_text' },
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          fixed: 'right',
          scopedSlots: { customRender: 'operate' }
        }
      ],
      data: []
    }
  },
  created() {
    this.getInfo()
    this.getPosList()
  },
  methods: {
    async batchPass() {
      if (this.select_rows.length < 1) return this.$message.error('请选择需要通过的用户')
      const id = this.select_rows.map(item => item.id)
      this.$confirm({
        title: '确认批量通过吗?',
        content: h => <div style="color:red;">此操作不可撤回</div>,
        onOk: async () => {
          try {
            await isPassAPI({ id, state: 1 })
            this.getPosList()
            this.$message.success('操作成功')
          } catch (error) {
            this.$message.error(error.data.msg)
          }
        },
        onCancel() {
          return
        },
        class: 'test'
      })
    },
    edit(object) {
      this.object = object
      this.isShowEdit = true
    },
    closeResult() {
      this.isShowResult = false
    },
    async amendment(id) {
      try {
        const result = await amendmentAPI({ id })
        console.log(result)
        console.log(JSON.stringify(result))
        this.resultContent = JSON.stringify(result)
        this.isShowResult = true
        this.$message.success('操作成功')
        this.getPosList()
        this.visible = false
      } catch (error) {
        this.resultContent = JSON.stringify(error.data)
        this.isShowResult = true
      }
    },
    query() {
      this.form.page = 1
      this.getPosList()
    },
    changepage(value) {
      this.form.page = value
      this.getPosList()
    },
    showSizeChange(value, val) {
      this.form.page_size = val
      this.getPosList()
    },
    reset() {
      this.form = {
        page: 1,
        page_size: 50,
        state: '00',
        no: '',
        realname: '',
        phone: '',
        channel_mer_no: ''
      }
      this.getPosList()
    },
    getInfo() {
      this.$route.query.card ? (this.form.no = this.$route.query.card) : (this.form.no = '')
      if (this.$route.query.card) {
        this.form.no = this.$route.query.card
        this.form.state = undefined
      } else {
        this.form = {
          page: 1,
          page_size: 50,
          state: '00',
          no: '',
          realname: '',
          phone: ''
        }
      }
      this.getPosList()
    },
    async getPosList() {
      try {
        this.loading = true
        const { data } = await getAccountListAPI(this.form)
        this.data = data.data
        this.total = data.total
        this.selectedRowKeys = []
        this.select_rows = []
        console.log(this.data)
      } finally {
        this.loading = false
      }
    },
    async pass(id) {
      try {
        await isPassAPI({ id, state: 1 })
        this.getPosList()
        this.$message.success('操作成功')
      } catch (error) {
        this.$message.error(error.data.msg)
      }
    },
    turnDown(id) {
      this.id = id
      this.visible = true
    },
    async handleOk() {
      try {
        const result = await isPassAPI({ id: this.id, state: 0, reason: this.value })
        this.getPosList()
        this.$message.success(result.msg)
        this.visible = false
        this.value = ''
      } catch (error) {
        this.$message.error(error.data.msg)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.inputStyle {
  width: 180px;
  margin-right: 10px;
}
.btnStyle {
  margin-right: 10px;
}

/deep/ .ant-table-body {
  white-space: nowrap;
  width: 100%;
  overflow-x: auto;
  font-size: 15px;
}

/* 整个滚动条 */
/deep/ .ant-table-body::-webkit-scrollbar {
  width: 5px;
  height: 6px;
}

/deep/ .ant-table-body::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #1890ff;
}

/deep/ .ant-table-body::-webkit-scrollbar-track {
  border-radius: 1px;
  background: #f1f1f1;
}
.addressStyle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.branchStyle {
  white-space: normal;
}

.reasonStyle {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
</style>
